<template>
  <div class="clock-container">
    <flip-item :total="2" :current="timeArr[0]" />
    <flip-item :total="9" :current="timeArr[1]" />
    <div class="colon"></div>
    <flip-item :total="5" :current="timeArr[2]" />
    <flip-item :total="9" :current="timeArr[3]" />
    <div class="colon"></div>
    <flip-item :total="5" :current="timeArr[4]" />
    <flip-item :total="9" :current="timeArr[5]" />
  </div>
  <div></div>
</template>

<script name ="clock" setup lang="ts">
import FlipItem from "./FlipItem.vue";
import {getTimeArr} from "@/utils/video";
import { ref, onMounted, onBeforeUnmount } from "vue";

const timeArr = ref(getTimeArr());
var timer;

onMounted(() => {
  startTimer();
});

onBeforeUnmount(() => {
  stopTimer();
});

function startTimer() {
  timer = setInterval(() => {
    // timeArr.value = getTimeArr(); // 使用 timeArr.value 更新值
    timeArr.value = getTimeArr();
  }, 1000);
}

function stopTimer() {
  clearInterval(timer);
}
</script>
<style scoped>
.clock-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.colon {
  height: 50px;
  padding: 0 10px;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
}

.colon::after,
.colon::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
}
</style>
